<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-06-30 10:21:55
 * @LastEditTime: 2022-06-30 23:44:09
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\components\ColumnSettings\index.vue
 * Copyright 版权声明
-->
<template>
  <div v-if="drawerVisible">
    <el-drawer
      v-model="drawerVisible"
      :close-on-click-modal="true"
      :before-close="handleClose"
      custom-class="global-drawer"
      size="500px"
      title="列设置"
    >
      <template #header>
        <h4>列设置</h4>
      </template>
      <template #default>
        <div class="body-container">

          <el-table
            class="column-settings-table"
            :data="fieldList"
            row-key="id"
            v-loading="listLoading"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="字段" prop="name"/>
            <el-table-column label="显示" prop="isShow" width="90" align="center"/>
            <el-table-column label="排序" width="200" align="center" class-name="handle-td" fixed="right">
              <template v-slot="scope">
                <el-button
                  :disabled="scope.$index === 0"
                  link
                  type="primary"
                  @click="handleMove('Top', scope.row, scope.$index)">
                  置顶
                </el-button>
                <el-button
                  :disabled="scope.$index === 0"
                  link
                  type="primary"
                  @click="handleMove('Up',scope.row, scope.$index)">
                  上移
                </el-button>
                <el-button
                  :disabled="scope.$index === (fieldList.length - 1)"
                  link
                  type="primary"
                  @click="handleMove('Down',scope.row, scope.$index)">
                  下移
                </el-button>
                <el-button
                  :disabled="scope.$index === (fieldList.length - 1)"
                  link
                  type="primary"
                  @click="handleMove('Bottom', scope.row, scope.$index)">
                  置底
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
          <!-- <el-button type="primary" @click="handleDefault">恢复默认配置</el-button> -->
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { ref, toRefs, reactive, onMounted, watch, computed, nextTick } from 'vue'
import store from '@/store'

export default {
  components: {},
  props: {
  },
  setup(props, context) {
    // 抽屉是否展示
    const storeGetters = reactive(store.getters)
    const { columnSettingsDrawerVisible } = toRefs(storeGetters)
    // list加载状态
    const listLoading = ref(false)
    // 字段list
    const fieldList = ref([
      {
        id: 1,
        name: '序号',
        isShow: true,
        order: 1
      },
      {
        id: 2,
        name: '用户名',
        isShow: true,
        order: 2
      },
      {
        id: 3,
        name: '密码',
        isShow: true,
        order: 3
      },
      {
        id: 4,
        name: '更新时间',
        isShow: true,
        order: 4
      },
      {
        id: 5,
        name: '状态',
        isShow: true,
        order: 5
      }
    ])

    // 取消操作
    const handleClose = () => {
      // drawerVisible.value = false
      store.dispatch('CloseColumnSettingsDrawer')
    }

    // 确定操作
    const handleSave = () => {
      // drawerVisible.value = true
      store.dispatch('CloseColumnSettingsDrawer')
    }

    // 恢复默认布局
    const handleDefault = () => {

    }

    // 排序
    const handleMove = (type, row, index) => {
      switch (type) {
        // 置顶
        case 'Top':
          fieldList.value.splice(index, 1)
          fieldList.value.splice(0, 0, row)
          break
        // 上移
        case 'Up':
          fieldList.value.splice(index, 1)
          fieldList.value.splice(index - 1, 0, row)
          break
        // 下移
        case 'Down':
          fieldList.value.splice(index, 1)
          fieldList.value.splice(index + 1, 0, row)
          break
        // 置底
        case 'Bottom':
          fieldList.value.splice(index, 1)
          fieldList.value.push(row)
          break
        default:
      }
    }

    const drawerVisible = computed(() => {
      return columnSettingsDrawerVisible.value
    })

    //行拖拽
    const rowDrop = () => {
      // const tbody = document.querySelector('.el-drawer__body .el-table__body-wrapper .el-table__body tbody')
      const tbody = document.querySelector('.column-settings-table .el-table__body tbody')
      Sortable.create(tbody, {
        animation: 1000,
        onEnd({ newIndex, oldIndex }) {
          const currRow = (fieldList.value).splice(oldIndex, 1)[0]
          fieldList.value.splice(newIndex, 0, currRow)
        }
      })
    }

    // //列拖拽
    // const columnDrop = () => {
    //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     onEnd: evt => {
    //       console.log('拖动了列')
    //       const oldItem = this.dropCol[evt.oldIndex]
    //       this.dropCol.splice(evt.oldIndex, 1)
    //       this.dropCol.splice(evt.newIndex, 0, oldItem)
    //     }
    //   })
    // }

    // onMounted
    onMounted(() => {
    })

    // watch
    watch(drawerVisible, async(value, oldValue) => {
      if (drawerVisible.value === true) {
        await nextTick()
        rowDrop()
      }
    })

    return {
      drawerVisible,
      listLoading,
      fieldList,
      handleClose,
      handleSave,
      handleDefault,
      handleMove
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.body-container{
  padding: 15px 20px;
}
</style>

